/**
 * Created by 小敏哥 on 2018/1/2.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import  {Link} from 'react-router'
import ItemList from '../../../../../../../src/js/components/itemList';
import IconText from '../../../../../../../src/js/components/iconText';
import InputWithDelete from '../../../../../../../src/js/components/inputWithDelete';
import {getCarDetail, updateCar,deleteCar,carDetail} from '../../actions/carDetailAction';
import {Toast} from 'antd-mobile';
import ReModal from '../../../../../../../src/js/components/reModal';
import style from './index.scss';
import common from "../../../../../../js/utils/common";

class CarDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: false,
        };

        this.data = {
            phone: {
                check: false,
                value: '',
                msg: '请输入正确的电话号码',
            }
        }
    }

    //设置输入框的值
    setValue(valueType, value, check) {
        this.data[valueType].value = value;
        this.data[valueType].check = check;
    }

    //检查所有数据
    checkAllData() {
        if(!this.data.phone.check){
            Toast.info('请输入正确的手机号码',2);
            return false;
        }
        return true;
    }

    //切换是否订阅按钮
    setMessageCheckStatus() {
        this.setState({
            isChecked: !this.state.isChecked,
        })
    }

    componentDidMount() {
        common.setViewTitle('车辆详情');
        this.props.dispatch(getCarDetail({
            carId: this.props.params.carId
        }, (result) => {
            this.setValue('phone', result.userTelephone, true);
            this.setState({
                isChecked: (result.isSubscribe == 1)
            })
        }))
    }

    //更新车辆数据
    updateCar() {
        this.props.dispatch(updateCar({
            carId: this.props.carDetail.carId,
            carNumber: this.props.carDetail.carNumber,
            carCode: this.props.carDetail.carCode,
            engineNumber: this.props.carDetail.engineNumber,
            isSubscribe: this.state.isChecked ? 1 : 0,
            phone: this.state.isChecked ? this.data.phone.value : '',
        }, (result) => {
            Toast.info('修改成功', 2);
            setTimeout(()=>{
                history.back();
            },2000);
        }))
    }

    //删除车辆
    deleteCar(){
        ReModal.confirm('是否确定删除该车辆信息？',()=>{
            this.props.dispatch(deleteCar({
                carId:this.props.carDetail.carId,
            },()=>{
                Toast.info('删除成功', 2);
                setTimeout(()=>{
                    history.go(-2);
                },2000);
            }))
        })
    }

    //保存
    saveChange() {
        //焦点离开事件和点击事件触发时间间隔较短，此处放置到执行队列后方，防止出错
        setTimeout(() => {
            if (this.checkAllData()) {
                this.updateCar();
            }
        }, 0)
    }

    componentWillUnmount(){
        this.props.dispatch(carDetail(null));
    }


    render() {
        return <div className={style.carDetail}>
            {this.props.carDetail ? <div>
                <div className={style.headermessage}>
                    <IconText imgUrl="./images/icon_brand.png" text={this.props.carDetail.carNumber}/>
                    <Link to={`updateMessage/${this.props.params.carId}`} className={style.updateMessage}><span>修改资料</span><img src="./images/go.png"/></Link>
                </div>
                <div className={style.tips}>所填信息为当地交管局查询所需，您的信息将严格保密</div>
                <ItemList borderPaddingLeft="0.3rem">
                    {this.props.carDetail.engineNumber?<div className={style.messageContent}>
                        <div>发动机号</div>
                        <div>{this.props.carDetail.engineNumber}</div>
                    </div>:''}
                    {this.props.carDetail.carCode?<div className={style.messageContent}>
                        <div>车身架号</div>
                        <div>{this.props.carDetail.carCode}</div>
                    </div>:''}
                    <InputWithDelete title="手机号码" placeholder="请输入手机号码" regular="^1\d{10}$" maxLength={11}
                                     initValue={this.props.carDetail.userTelephone}
                                     currentCallBack={(result) => {
                                         this.setValue('phone', result, true);
                                     }} errorCallBack={(result) => {
                        this.setValue('phone', result, false);
                    }}/>
                </ItemList>

                <div className={style.bottomTips}>
                    2-5个工作日内将办理结果发送到您的手机上，请准确填写
                </div>
                {/*<div className={style.userMessage}>
                    <ItemList borderPaddingLeft="0.3rem">
                        <div className={style.newMessageStatus}>
                            <div>开通新违章消息通知服务</div>
                            <Switch disabled={false} onChange={() => {
                                this.setMessageCheckStatus()
                            }} checked={this.state.isChecked}/>
                        </div>
                        {this.state.isChecked ? <InputWithDelete title="手机号码" placeholder="请输入手机号码" regular="^[\d]{11}$"
                                                                 initValue={this.props.carDetail.userTelephone}
                                                                 currentCallBack={(result) => {
                                                                     this.setValue('phone', result, true);
                                                                 }} errorCallBack={(result) => {
                            this.setValue('phone', result, false);
                        }}/> : ''}
                    </ItemList>
                </div>*/}

                <button onClick={() => {
                    this.saveChange();
                }} className={style.save}>保存信息
                </button>
                <button onClick={()=>{
                    this.deleteCar();
                }} className={style.delete}>删除</button>
            </div> : ''}
        </div>
    }
}

function mapStateToProps(state) {
    return Object.assign({}, state.carDetailInfo);
}

export default connect(mapStateToProps)(CarDetail);